<template>
  <div class="mt-1">
    <van-form>
      <h4 style="margin: 0 0 0.4rem 1rem; color: gray">
        当前产区:{{ this.$store.getters.productionLine }}
      </h4>
      <van-field
        readonly
        clickable
        :value="processOrder.PROCORDER"
        label="工单号"
        placeholder="请选择工单号"
        @click="processOrderVisible = true"
      />
      <van-popup
        v-model="processOrderVisible"
        position="bottom"
        style="height: 100%"
        class="bg-default"
      >
        <process-order @get-val="getProcessOrder" @back="back" />
      </van-popup>
      <van-field
        v-model="potcode"
        clearable
        label="锅码"
        placeholder="请扫描锅码"
        ref="gmfocus"
        @focus="stopGMborad"
      />
      <van-field
        v-model="code"
        clearable
        label="拍码"
        ref="pmfocus"
        @focus="stopKeyborad"
        placeholder="请扫描拍码"
      />
      <ag-grid-vue
        style="width: 100%; height: 60vh"
        class="ag-theme-alpine mt-1"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :gridOptions="gridOptions"
        :singleClickEdit="true"
        rowSelection="multiple"
        :rowData="rowData"
      >
      </ag-grid-vue>
      <van-popup
        v-model="ShowStatue"
        position="bottom"
        style="height: 100%"
        class="bg-default"
      >
        <order-data
          :ShowDataA="ShowData"
          @get-val="SureBottom"
          v-if="ShowStatue"
        />
      </van-popup>
      <audio src="../../assets/warning.mp3" preload="auto" id="bgMusic"></audio>
    </van-form>
  </div>
</template>

<script>
import { AgGridVue } from "ag-grid-vue";
import { CODE_LENGTH } from "../../config";
import { mapGetters } from "vuex";
import ProcessOrder from "../../components/ProcessOrder";
import { AgGrid } from "../../mixins/AgGrid";
import { parseQRCode, toast } from "../../utils/common";
import {
  commissionSubmit,
  SerachList,
  GetPotCodeList,
} from "../../api/feeding";
import OrderData from "../../components/OrderData.vue";

export default {
  name: "WorkOrder",
  components: { AgGridVue, ProcessOrder, OrderData },
  mixins: [AgGrid],
  data() {
    return {
      labelWidth: "7em",
      code: "",
      orderNo: "",
      potcode: "",
      //potcodeNew: "",
      ShowStatue: false,
      processOrderVisible: false,
      columnDefs: [
        { headerName: "物料号", field: "ProductId", width: 90 },
        { headerName: "物料名称", field: "ProductName", width: 125 },
        { headerName: "生产日期", field: "ProductionDate", width: 100 },
        {
          headerName: "数量",
          field: "Num",
          width: 70,
        },
      ],
      rowData: [],
      NewData: [],
      ShowData: {},
      workMarterial: [],
      potlist: [],
      processOrder: {},
    };
  },
  watch: {
    potcode(val) {
      if (val.length > 0) {
        if (this.potlist.indexOf(val) != -1) {
          //this.potcodeNew = this.potcode;
          //this.potcode = "";
          this.$refs.pmfocus.focus();
        } else {
          this.potcode = "";
          toast("此锅码不存在");
        }
      }
    },
    code(val) {
      if (this.potcode) {
        if (!this.processOrder.PROCORDER) {
          this.playMusic();
          toast("请先选择工单号");
        } else if (val.length > CODE_LENGTH) {
          let res = parseQRCode(val);
          console.log(res);
          if (res) {
            this.getMarterial();
            if (this.workMarterial.indexOf(res.materialCode) != -1) {
              this.findPat(res.palletNo, res.materialCode);
              this.$refs.gmfocus.focus();
            } else {
              this.playMusic();
              toast("所选工单没有此物料号");
              this.$refs.pmfocus.focus();
            }
          } else {
            this.playMusic();
            toast("此拍已被录入");
            this.$refs.pmfocus.focus();
          }
        }
      } else {
        toast("请先扫描锅码");
      }
      //console.log(this.potcodeNew);

      this.code = "";
      //console.log(this.potcodeNew);
    },
  },
  computed: {
    ...mapGetters(["productionLine"]),
  },
  methods: {
    // 消除获取焦点时自动弹出键盘
    stopKeyborad() {
      this.$refs.pmfocus.$refs.input.setAttribute("readonly", "readonly");
      setTimeout(() => {
        this.$refs.pmfocus.$refs.input.removeAttribute("readonly");
      }, 200);
    },
    stopGMborad() {
      this.$refs.gmfocus.$refs.input.setAttribute("readonly", "readonly");
      setTimeout(() => {
        this.$refs.gmfocus.$refs.input.removeAttribute("readonly");
      }, 200);
    },
    //播放警示音
    playMusic() {
      setTimeout(() => {
        let audio = document.getElementById("bgMusic");
        audio.play();
      }, 200);
    },
    //获取选中的工单号和物料号
    getProcessOrder(val) {
      console.log(val);
      this.processOrder = val;
      this.processOrderVisible = false;
      this.$refs.gmfocus.focus();
    },
    back() {
      //返回
      this.processOrderVisible = false;
    },
    //遍历物料号
    getMarterial() {
      let _this = this;
      this.processOrder.Items.map((item) => {
        _this.workMarterial.push(item.MATERIAL);
      });
      console.log(this.workMarterial);
    },
    //获取锅码
    async getPotCodeList() {
      let res = await GetPotCodeList(this.$store.getters.productionLine);
      //let res = await GetPotCodeList("MM1Make");
      if (res.Status == 200) {
        if (res.Data.length == 0) {
          toast("此产线无锅码数据");
        } else {
          let _this = this;
          res.Data.map((it) => {
            _this.potlist.push(it.F_ItemName);
          });
          //this.potlist = JSON.parse(JSON.stringify(res.Data));
        }
      } else {
        toast(res.Msg);
      }
    },
    /*     SureBottom(val) {
      this.ShowStatue = false;
      this.rowData.push({
        ProductName: this.ShowData.ProductName,
        ProductId: this.ShowData.ProductId,
        UniqueId: this.ShowData.UniqueId,
        Num: val,
        ProductionDate: this.ShowData.ProductionDate.substring(0, 10),
        OutStorageBillDetailId: this.ShowData.OutStorageBillDetailId,
      });
    }, */
    async SureBottom(val, palletNo, materialCode) {
      this.ShowStatue = false;
      let user = this.$store.getters.user;
      let productionline = this.$store.getters.productionLine;
      let res = await commissionSubmit(
        productionline,
        palletNo,
        materialCode,
        "6",
        user,
        "2",
        "",
        this.$store.getters.WarehouseId,
        this.processOrder.PROCORDER,
        "",
        val,
        "",
        "",
        this.potcode
      );
      console.log(res);
      if (res && res.Status == 200 && res.Data) {
        this.rowData.push({
          ProductName: this.ShowData.ProductName,
          ProductId: this.ShowData.ProductId,
          UniqueId: this.ShowData.UniqueId,
          Num: val,
          ProductionDate: this.ShowData.ProductionDate.substring(0, 10),
          OutStorageBillDetailId: this.ShowData.OutStorageBillDetailId,
        });
        toast(res.Msg);
      } else {
        this.playMusic();
        toast(res.Msg);
      }
      this.potcode = "";
      //this.$refs.pmfocus.focus();
    },
    //从外界添加数据
    async findPat(palletNo) {
      let productionline = this.$store.getters.productionLine;
      //let user = this.$store.getters.user;
      let res = await SerachList(
        productionline,
        palletNo,
        this.$store.getters.WarehouseId
      );
      if (res.Status == 200 && res.Data != null) {
        this.ShowStatue = true;
        this.ShowData = JSON.parse(JSON.stringify(res.Data));
      } else {
        if (res.Status == 200 && res.Data == null) {
          this.playMusic();
          toast("此物料查询不到");
        } else {
          this.playMusic();
          toast(res.Msg);
        }
      }
      console.log(res);
    },
  },
  mounted() {
    this.getPotCodeList();
    this.$refs.gmfocus.focus();
  },
};
</script>
<style>
</style>
